<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<ul class = "list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    /*
    * 点击每一个盒子li 打印里面的内容
    * */
    let liList = document.querySelectorAll(".list li") //形成的是一个数组

    /*for(var i = 0,l = liList.length;i < l;i++){
        liList[i].onclick = (function (j){
            return function(){
                console.log(liList[j].innerHTML)
            }
        })(i)
    } //这是原来的写法 */

    for(var i = 0,l = liList.length;i < l;i++){
        liList[i].onclick = function (){ //用数组内下标的方式找到那个被点击的li
            //函数被绑定到li数组中的onclick属性中，这个函数就成为onclick属性的属性值 liList[i].onclick就等同于liList[i].function()
            //根据 对象.函数(执行) this就是指向这个对象
            //所以被点击的那个li盒子调用了这个函数
            console.log(this.innerHTML) //调用这个函数的对象，因为这个函数被绑定到li标签中，所以函数的调用者就是那个li
        }
    }

    /*
    * 找到正确的this
    * */

    let obj = {
        a:{
            b:{
                c:{
                    d:
                        function(){
                            console.log(this)
                        }
                }
            }
        }
    }

    //怎么调用这个函数？
    obj.a.b.c.d()

    //谁调用了这个函数？（此时这个this指向谁？）
    //obj.a.b.c

    //console.log(obj.a.b.c.d) //是什么？
    //是函数 f(){console.log(this)}

    let fn = obj.a.b.c.d
    fn() // 打印什么？ 因为函数是这一行才被调用执行 所以找这一行的调用主体 找不到调用主体 所以window是调用主体

    let o = {
        fn:function (){
            console.log(this)

            function f(){
                console.log(this)
            }
            f() //函数是这一行被调用的 这一行函数f是自己执行的 没有调用者 所以就是window调用的
        }
    }
    o.fn() //打印两次this
    //分别是什么? 第一个是o 第二个是window



</script>
</body>
</html>